﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>PKCS#12 Simple Example</title>

  <style type="text/css">
    body {
      background: #EFEFEF;
      font: normal 14px/16px Helvetica, Arial, sans-serif;
    }

    .wrapper {
      width: 600px;
      margin: 50px auto;
      padding: 50px;
      border: solid 2px #CCC;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      box-shadow: 0 0 12px 3px #CDCDCD;
      -webkit-box-shadow: 0 0 12px 3px #CDCDCD;
      background: #FFF;
    }

    label {
      margin: 0 0 8px;
    }

    textarea {
      width: 500px;
      border: solid 1px #999;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      height: 340px;
      font: normal 12px/15px monospace;
      display: block;
      margin: 0 0 12px;
      box-shadow: 0 0 5px 5px #EFEFEF inset;
      -webkit-box-shadow: 0 0 5px 5px #EFEFEF inset;
      padding: 20px;
      resize: none;
    }

    a {
      display: inline-block;
      padding: 5px 15px;
      background: #ACD0EC;
      border: solid 1px #4C6181;
      color: #000;
      font: normal 14px/16px Helvetica, Arial, sans-serif;
    }

    a:hover {
      background: #DAEBF8;
      cursor: pointer;
    }

    .header-block {
      margin-top: 30px;
      font: bold 16px/20px Helvetica, Arial, sans-serif;
    }

    .border-block {
      border: solid 2px #999;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      margin: 10px 0 0;
      padding: 20px 30px;
      background: #F0F4FF;
    }

    .border-block h2 {
      margin: 0 0 16px;
      font: bold 22px/24px Helvetica, Arial, sans-serif;
    }

    .border-block p {
      margin: 0 0 12px;
    }

    .border-block p .type {
      font-weight: bold;
      display: inline-block;
      width: 176px;
    }

    .border-block .two-col {
      overflow: hidden;
      margin: 0 0 16px;
    }

    .border-block .two-col .subject {
      width: 180px;
      font-weight: bold;
      margin: 0 0 12px;
      float: left;
    }

    .border-block .two-col #cert-attributes {
      margin: 0;
      padding: 0;
      float: left;
      list-style: none;
    }

    .border-block .two-col #cert-attributes li p {
      margin: 0;
    }

    .border-block .two-col #cert-attributes li p span {
      width: 40px;
      display: inline-block;
      margin: 0 0 5px;
    }

    .border-block .two-col #cert-exten {
      overflow: hidden;
      padding: 0 0 0 17px;
      margin: 0;
      list-style-type: square;
    }

    table {
      border: solid;
      border-collapse: collapse;
      border-color: black;
    }

    th {
      text-align: center;
      background: #ccc;
      padding: 5px;
      border: 1px solid black;
    }

    td {
      padding: 5px;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <fieldset>
      <legend>NOTE</legend>
      <div>
        <p>PKIjs supports many different combinations of PKCS#12. Most clients only support one combination.
          Clients typically only support a combination where the same password is used for protection and
          integrity.</p>

        <p>PKIjs, also only supports creation of AES-CBC and AES-GCM protected PKCS#12’s which will not be
          readable by Windows which only supports weak ciphers in PKCS#12 files.</p>

        <p>You can parse the Password-Based Privacy Protection variant PKIjs creates using this command:</p>

        <p>openssl pkcs12 -in pkijs_pkcs12.p12</p>
      </div>
    </fieldset>
  </div>

  <div class="wrapper">
    <div>
      <fieldset>
        <legend>PKCS#12 With OpenSSL-like Internal Structure</legend>

        <p>
          <label for="password1" style="float:left;">Password:</label>
          <input id="password1" type="text" />
        </p>

        <button id="open_ssl_like">Create</button>
      </fieldset>
    </div>

    <div>
      <fieldset>
        <legend>PKCS#12 With Password-Based Integrity Protection And No Privacy Protection</legend>

        <p>
          <label for="password2" style="float:left;">Password:</label>
          <input id="password2" type="text" />
        </p>

        <button id="password_based_integrity">Create</button>
      </fieldset>
    </div>

    <div>
      <fieldset>
        <legend>PKCS#12 With Certificate-Based Integrity Protection And No Privacy Protection</legend>
        <button id="certificate_based_integrity">Create</button>
      </fieldset>
    </div>

    <div>
      <fieldset>
        <legend>PKCS#12 With No Privacy Protection and Password-Based Integrity Protection</legend>

        <p>
          <label for="password3" style="float:left;">Password:</label>
          <input id="password3" type="text" />
        </p>

        <button id="no_privacy">Create</button>
      </fieldset>
    </div>

    <div>
      <fieldset>
        <legend>PKCS#12 With Password-Based Privacy And Inegrity Protection</legend>

        <p>
          <label for="password4" style="float:left;">Password:</label>
          <input id="password4" type="text" />
        </p>

        <button id="password_privacy">Create</button>
      </fieldset>
    </div>

    <div>
      <fieldset>
        <legend>PKCS#12 With Certificate-Based Privacy And Password-Based Integrity Protection</legend>

        <p>
          <label for="password5" style="float:left;">Password:</label>
          <input id="password5" type="text" />
        </p>

        <button id="certificate_privacy">Create</button>
      </fieldset>
    </div>
  </div>

  <div class="wrapper">
    <fieldset>
      <legend>Parse OpenSSL-like PKCS#12 data</legend>

      <fieldset>
        <legend>NOTE</legend>
        <div>
          <p>Unfortunately current versions of Windows and OpenSSL only support using weak cryptographic
            primitives in PKCS#12. WebCrypto does not support these weaker mechanisms so we can not fully
            parse files all files created by them.</p>

          <p>With that said OpenSSL does support some stronger options, specifically it allows creation of
            PKCS#12’s using AES-CBC. You can create such a file with this command:</p>

          <p>openssl pkcs12 -export -inkey key.pem -in test.cer -out test.p12 -certpbe AES-256-CBC -keypbe
            AES-256-CBC</p>
        </div>
      </fieldset>
      <p>
        <label for="password" style="float:left;">Password:</label>
        <input id="password" type="text" />
      </p>

      <p>
        <label for="pkcs12_file">Select binary PKCS#12 file:</label>
        <input type="file" id="pkcs12_file" title="PKCS#12 data" />
      </p>

      <label for="parsing_result" style="float:left;">BASE-64 decoded certificate + PKCS#8 private key:</label>
      <textarea id="parsing_result">&lt; PKCS#12 parsing result will be stored here &gt;</textarea>
    </fieldset>
  </div>

  <script src="bundle.js" type="module"></script>

</body>

</html>